<template>
  <ul>
    <li>ID{{route.params.id}}</li>
    <li>TITLE{{state.detail.title}}</li>
    <li>CONTENT{{state.detail.content}}</li>
  </ul>
</template>
<script lang="ts">
import { reactive } from "@vue/reactivity";
export default {
  name: "MessageDetail",
};
</script>
<script lang="ts" setup>
// 定义接口

import { useRoute } from "vue-router";
import { onMounted, reactive , watch} from "vue";
interface MessageDetail {
  id: number;
  title: string;
  content: string;
}
// 定义数组
const message: MessageDetail[] = [
  { id: 1, title: "MessageDetail001", content: "content001" },
  { id: 2, title: "MessageDetail002", content: "content002" },
  { id: 3, title: "MessageDetail003", content: "content003" },
];

// 获取信息
const state = reactive({  
  // as类型断言，不管前边什么类型都可以把它变成后边的类型
  detail: {} as MessageDetail,
});
// 页面挂载后的钩子
onMounted(() => {
  // 先把字符串类型的数据转数据类型
  const id = +route.params.id;
  state.detail = messageDetails.find((item) => item.id === id);
});
// 监视属性
watch(
  () => route.params,
  () => {
    const id = +route.params.id
    state.detail = messageDetails.find((item) => item.id === id);
  }
)
// 获取路由信息对象
const route = useRoute();
</script>
<style scoped></style>
